<template>
	<view class="container">
		<view class="order-info flex justify-center align-center">
			<text class="label">修改: #{{$Route.query.info.id}} {{$Route.query.info.ptitle}}</text>
			<text class="value"
				:class="$Route.query.info.ostyle==0?'up-color':'down-color'">{{$Route.query.info.ostyle==0?'买入':'卖出'}}/{{$Route.query.info.onumber}}手</text>
		</view>

		<view class="form mt-30">
			<view class="flex justify-between align-center mb-30" v-if="$Route.query.type==2">
				<text class="label">价格 <text class="price-limit" :class="isLimitValid?'color-gray':'up-color'">[{{optionType == 1?'>='+c_limit_min:'<='+c_limit_max}}]</text> </text>
				<u-number-box :positive-integer="false" :input-width="160" v-model="limitPrice"
					:step="parseFloat(stockInfo.number)"></u-number-box>
			</view>
			<view class="header flex justify-between align-center">
				<text class="header-text">止盈止损</text>
				<text class="header-desc">价格</text>
			</view>

			<view class="flex align-center justify-between mt-30">
				<view class="flex flex-column">
					<text class="label">止损</text>
					<text class="range" :class="isCloseLoseValid?'color-gray':'up-color'">[{{c_loseClosePrice.unit+c_loseClosePrice.value}}]</text>
					<text class="preview" v-if="closeLosePrice">预计盈亏 {{c_loseCloseDelta}}</text>
				</view>
				<u-number-box :positive-integer="false" :input-width="160" v-model="closeLosePrice"
					:step="parseFloat(stockInfo.number)" @change="loseChange"></u-number-box>
			</view>
			
			<view class="flex align-center justify-between mt-30">
				<view class="flex flex-column">
					<text class="label">止赢</text>
					<text class="range" :class="isCloseEarnValid?'color-gray':'up-color'">[{{c_earnClosePrice.unit+c_earnClosePrice.value}}]</text>
					<text class="preview" v-if="closeEarnPrice">预计盈亏 {{c_earnCloseDelta}}</text>
				</view>
				<u-number-box :positive-integer="false" :input-width="160" v-model="closeEarnPrice"
					:step="parseFloat(stockInfo.number)" @change="earnChange"></u-number-box>
			</view>
		</view>
		<view class="bottom flex">
			<view class="left-item" :class="[stockInfo.sellColor]">卖出{{stockInfo.BP1}}</view>
			<view class="right-item" :class="[stockInfo.buyColor]">买入{{stockInfo.SP1}}</view>
		</view>
		<view class="common-btn submit-btn" @tap="submit">修改</view>
	</view>
</template>

<script>
	import {
		createWebsocket,
		sendSocketMessage
	} from '@/websocket/index.js'
	import {
		mapGetters,
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				stockInfo: {},
				timer: null,
				key: 8,
				limitPrice:0,
				closeLosePrice: 0,
				closeEarnPrice:0,
				firstLoad:true,
				tailCount:0,
				optionType:1
			};
		},
		computed: {
			...mapState("user", ["isMock"]),
			...mapGetters("user", ["getToken", "getUserInfo"]),
			isLimitValid() {
				if (this.optionType == 1) {
					return this.limitPrice >= this.c_limit_min
				} else {
					return this.limitPrice <= this.c_limit_max
				}
			},
			//限价最小值
			c_limit_min() {
				//做空
				if (this.optionType == 1) {
					return parseFloat((parseFloat(this.stockInfo.BP1) + this.key * parseFloat(this.stockInfo.number))
						.toFixed(this.tailCount))
				} else {
					return 0
				}
			},
			c_limit_max() {
				//做多
				if (this.optionType == 2) {
					return parseFloat((parseFloat(this.stockInfo.SP1) - this.key * parseFloat(this.stockInfo.number))
						.toFixed(this.tailCount))
				} else {
					return 100000000000
				}
			},
			isCloseLoseValid() {
				let _price = parseFloat(this.c_loseClosePrice.value)
				if (this.c_loseClosePrice.unit == ">=") {
					return this.closeLosePrice >= _price
				} else if (this.c_loseClosePrice.unit == "<=") {
					return this.closeLosePrice <= _price
				}
			},
			isCloseEarnValid() {
				let _price = parseFloat(this.c_earnClosePrice.value)
				if (this.c_earnClosePrice.unit == ">=") {
					return this.closeEarnPrice >= _price
				} else if (this.c_earnClosePrice.unit == "<=") {
					return this.closeEarnPrice <= _price
				}
			},
			//止损  价格范围
			c_loseClosePrice() {
				if (!this.stockInfo.SP1) {
					return "-"
				}
				let unit
				let value
				//卖出
				if (this.optionType== 1) {
					unit = ">="
					//市价
					if (this.$Route.query.type == 1) {
						value = parseFloat((parseFloat(this.stockInfo.SP1) + (parseFloat(this.stockInfo.number) * this
							.key)).toFixed(this.tailCount))
					} else {
						value = parseFloat((parseFloat(this.stockInfo.SP1) + (parseFloat(this.stockInfo.number) * this
							.key * 2)).toFixed(this.tailCount))
					}
				} else {
					unit = "<="
					//市价
					if (this.$Route.query.type == 1) {
						value = parseFloat((parseFloat(this.stockInfo.BP1) - (parseFloat(this.stockInfo.number) * this
							.key)).toFixed(this.tailCount))
					} else {
						value = parseFloat((parseFloat(this.stockInfo.BP1) - (parseFloat(this.stockInfo.number) * this
							.key * 2)).toFixed(this.tailCount))
					}
				}
				return {
					unit,
					value
				}
			},
			//止损 预计盈亏
			c_loseCloseDelta() {
				if (!this.stockInfo.SP1) {
					return "-"
				}
				let value

				let _money = parseFloat(this.stockInfo.money)
				let orderPrice
				if (this.$Route.query.type == 1) {
					if (this.optionType== 1) {
						orderPrice = parseFloat(this.stockInfo.BP1)
					} else {
						orderPrice = parseFloat(this.stockInfo.SP1)
					}
				} else {
					orderPrice = this.limitPrice
				}
				//卖出
				if (this.optionType== 1) {
					value = (orderPrice - this.closeLosePrice) / parseFloat(this.stockInfo.number) * parseFloat(this.$Route
						.query.info.onumber) * _money
				} else {
					value = ((orderPrice - this.closeLosePrice) / parseFloat(this.stockInfo.number) * parseFloat(this
						.$Route.query.info.onumber) * _money) * (-1)
				}
				return value.toFixed(this.tailCount)
			},
			//止盈 价格范围
			c_earnClosePrice() {
				if (!this.stockInfo.SP1) {
					return "-"
				}
				let unit
				let value
				//卖出
				if (this.optionType== 1) {
					unit = "<="
					if (this.$Route.query.type == 1) {
						value = parseFloat((parseFloat(this.stockInfo.SP1) - (parseFloat(this.stockInfo.number) * this
							.key)).toFixed(this.tailCount))
					} else {
						value = parseFloat((parseFloat(this.stockInfo.SP1)).toFixed(this.tailCount))
					}
				} else {
					unit = ">="
					if (this.$Route.query.type== 1) {
						value = parseFloat((parseFloat(this.stockInfo.BP1) + (parseFloat(this.stockInfo.number) * this
							.key)).toFixed(this.tailCount))
					} else {
						value = parseFloat((parseFloat(this.stockInfo.BP1)).toFixed(this.tailCount))
					}
				}
				return {
					unit,
					value
				}
			},
			//止盈 预计盈亏
			c_earnCloseDelta() {
				if (!this.stockInfo.SP1) {
					return "-"
				}
				let value
				let _money = parseFloat(this.stockInfo.money)
				let orderPrice
				if (this.$Route.query.type== 1) {
					if (this.optionType== 1) {
						orderPrice = parseFloat(this.stockInfo.BP1)
					} else {
						orderPrice = parseFloat(this.stockInfo.SP1)
					}
				} else {
					orderPrice = this.limitPrice
				}
				//卖出
				if (this.optionType == 1) {
					value = (orderPrice - this.closeEarnPrice) / parseFloat(this.stockInfo.number) *  parseFloat(this.$Route
						.query.info.onumber) * _money
				} else {
					value = ((orderPrice - this.closeEarnPrice) / parseFloat(this.stockInfo.number) *  parseFloat(this.$Route
						.query.info.onumber) * _money) *
						(
							-1)
				}
				return value.toFixed(this.tailCount)
			},
		},
		methods: {
			async submit(){
				let params={
					surplus:this.closeEarnPrice,
					loss:this.closeLosePrice,
					oid:this.$Route.query.info.id,
				}
				if(this.$Route.query.type==1){
					try{
						await this.$u.api.holdModifyApi(params)
						uni.showToast({
							icon:"success",
							title:"修改成功"
						})
						setTimeout(()=>{
							this.$Router.back(1)
						},1000)
					}catch(e){
						//TODO handle the exception
					}
				}
				else{
					params=Object.assign({},params,{
						key:this.$Route.query.info.key,
						order_pid:this.$Route.query.info.order_pid,
						newprice:this.limitPrice,
					})
					await this.$u.api.peddingModifyApi(params)
					uni.showToast({
						icon:"success",
						title:"修改成功"
					})
					setTimeout(()=>{
						this.$Router.back(1)
					},1000)
				}
			},
			earnChange({value}){
				if(Math.abs(value)==parseFloat(this.stockInfo.number)){
					let _price = parseFloat(this.c_earnClosePrice.value)
					setTimeout(()=>{
						this.closeEarnPrice=_price
					},200)
				}
			},
			loseChange({
				value
			}) {
				let _price = parseFloat(this.c_loseClosePrice.value)
			
				if(Math.abs(value)==parseFloat(this.stockInfo.number)){
					setTimeout(()=>{
						this.closeLosePrice=_price
					},200)
				}
			},
			websocketOpenCallback() {
				let pid=this.$Route.query.type==1?this.$Route.query.info.pid:this.$Route.query.info.order_pid
				sendSocketMessage(JSON.stringify({
					action: "fordata",
					pid,
					token: this.getToken
				}))
				this.timer = setInterval(() => {
					sendSocketMessage(JSON.stringify({
						action: "fordata",
						pid,
						token: this.getToken
					}))
				}, 1000)
			},
			websocketMessageCallback({
				data
			}) {
				if (this.firstLoad) {
					uni.hideLoading();
					this.firstLoad = false
				}
				if (data.action == "fordata") {
					let sellColor
					let buyColor
					if(parseFloat(this.stockInfo.BP1)>parseFloat(data.res.data.pro.BP1)){
						sellColor='down-color'
					}
					else{
						sellColor='up-color'
					}
					if(parseFloat(this.stockInfo.SP1)>parseFloat(data.res.data.pro.SP1)){
						buyColor='down-color'
					}
					else{
						buyColor='up-color'
					}
					this.stockInfo = data.res.data.pro
					this.$set(this.stockInfo,"sellColor",sellColor)
					this.$set(this.stockInfo,"buyColor",buyColor)
					
					this.tailCount=this.stockInfo.number.split(".")[1].length
				}
			}
		},
		onLoad() {
			//显示加载
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			setTimeout(() => {
				uni.hideLoading();
			}, 3000)
			//websocket
			createWebsocket()
			this.websocketOpenCallback()
			uni.$on("websocketMessage", this.websocketMessageCallback)
			if(this.$Route.query.info.loss){
				this.closeLosePrice=parseFloat(this.$Route.query.info.loss) 
			}
			if(this.$Route.query.info.surplus){
				this.closeEarnPrice=parseFloat(this.$Route.query.info.surplus)
			}
			
			if(this.$Route.query.type==2){
				uni.setNavigationBarTitle({
					title:"修改挂单"
				})
				this.optionType=this.$Route.query.info.ostyle==1?1:2
				this.limitPrice=this.$Route.query.info.newprice
			}else{
				this.optionType=this.$Route.query.info.ostyle==1?1:2
			}
		},
		onUnload() {
			uni.$off("websocketMessage", this.websocketMessageCallback)
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.color-gray{
			color: #999;
		}
		.mb-30{
			margin-bottom: 30rpx;
		}
		.order-info {
			padding: 30rpx 0;
			background-color: #fff;

			.label {
				margin-right: 10rpx;
				font-size: 24rpx;
				color: #333333;
			}

			.value {
				font-size: 24rpx;
			}
		}

		.form {
			padding: 30rpx;
			background-color: #fff;

			.header {
				height: 50rpx;

				.header-text {
					font-size: 24rpx;
					color: #333;
				}

				.header-desc {
					font-size: 24rpx;
					color: $color-blue;
				}
			}
			.label{
				
			}
			.range{
				margin-top: 10rpx;
				font-size: 24rpx;
			}
			.preview{
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #999;
			}
		}
		.bottom{
			margin-top: 30rpx;
			background-color: #fff;
			padding: 30rpx;
			.left-item{
				flex:1;
				font-size: 32rpx;
				text-align: center;
			}
			.right-item{
				flex:1;
				font-size: 32rpx;
				text-align: center;
			}
		}
		.submit-btn{
			margin:60rpx 30rpx;
		}
	}
</style>
